<!-- 多圆环嵌套图 -->
<template>
  <div ref="echartRef" class="concentric-circle-chart"></div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref, nextTick, markRaw} from "vue";
import * as echarts from "echarts";

const echartRef = ref(null);
let myChart: echarts.ECharts | null = null; // 明确类型

const color = [
  "#fb734e",
  "#e32f46",
  "#94d96c",
  "#0bbcb7",
  "#1a9bfc",
  "#7049f0",
  "#0bbcb7",
  "#1a9bfc",
];
const dataStyle = {
  normal: {
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    shadowBlur: 40,
    borderWidth: 10,
    shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
  },
};
const placeHolderStyle = {
  normal: {
    color: "#393d50",
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
  },
  emphasis: {
    color: "#393d50",
  },
};

const generateArray = function generateGradientArray(a, b, c, d) {
  let result: number[][] = [];
  for (let i = 0; i < d; i++) {
    // 计算当前行的第一个和第二个元素
    let firstElement = a + i * c;
    let secondElement = a + i * c + b;

    // 将计算出的元素添加到当前行
    result.push([firstElement, secondElement]);
  }
  return result;
};
console.log(generateArray(40, 10, 20, 4));
const generateArray2 = generateArray(40, 5, 10, 4);

type pieData = {
  name: string;
  value: number;
};
type pieTitle = {
  text: string;
  textStyle: {
    fontSize: number;
    color: string;
  };
};
type pieSubTitle = {
  text: string;
  textStyle: {
    fontSize: number;
    color: string;
  };
};
const props = defineProps<{
  backgroundColor: string,
  pieData: Array<pieData>;
  pieTitle: pieTitle;
  pieSubTitle: pieSubTitle;
}>();

const series = props.pieData;
console.log("prpps.pieData.value:", series);

series.map((item, index) => {
  return {
    name: item.name,
    type: "pie",
    clockWise: false,
    // radius: [106, 110],
    radius: generateArray2[index],
    center: ["50%", "50%"],
    itemStyle: dataStyle,
    hoverAnimation: false,
    startAngle: 90,
    data: [
      {
        value: 30,
        name: "二级匹配度",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: color[4],
              },
              {
                offset: 1,
                color: color[5],
              },
            ]),
          },
        },
      },
      {
        value: 0,
        name: "",
        tooltip: {
          show: false,
        },
        itemStyle: placeHolderStyle,
      },
    ],
  };
});
const option = {
  backgroundColor: props.backgroundColor,
  title: {
    text: props.pieTitle.text,
    x: "center",
    y: "center",
    // textAlign: "auto",
    textVerticalAlign: "auto",
    textStyle: {
      fontWeight: "bold",
      fontSize: props.pieTitle.textStyle.fontSize,
      color: props.pieTitle.textStyle.color,
    },
    subtext: props.pieSubTitle.text,
    subtextStyle: {
      fontSize: props.pieSubTitle.textStyle.fontSize,
      color: props.pieSubTitle.textStyle.color,
      fontWeight: "bold",
      // lineHeight: 16,
    },
  },
  tooltip: {
    trigger: "item",
    show: true,
    formatter: "{b} : <br/>{d}%",
    backgroundColor: "rgba(0,0,0,0.7)", // 背景
    padding: [8, 10], //内边距
    extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
  },
  // legend: {
  //   orient: 'vertical',
  //   // icon: 'circle',
  //   left: 'left',
  //   top: '20',
  //   itemGap: 20,
  //   data: ['二级匹配度', '三级匹配度', '四级匹配度', '04', '05', '06'],
  //   textStyle: {
  //     color: '#fft'
  //   }
  // },
  series: [
    {
      name: "Line 5",
      type: "pie",
      clockWise: false,
      // radius: [106, 110],
      radius: generateArray2[0],
      center: ["50%", "50%"],
      itemStyle: dataStyle,
      hoverAnimation: false,
      startAngle: 90,
      data: [
        {
          value: 30,
          name: "1级匹配度",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: color[4],
                },
                {
                  offset: 1,
                  color: color[5],
                },
              ]),
            },
          },
        },
        {
          value: 0,
          name: "",
          tooltip: {
            show: false,
          },
          itemStyle: placeHolderStyle,
        },
      ],
    },
    {
      name: "Line 1",
      type: "pie",
      clockWise: false,
      // radius: [86, 100],
      radius: generateArray2[1],
      center: ["50%", "50%"],
      itemStyle: dataStyle,
      hoverAnimation: false,
      startAngle: 90,
      label: {
        borderRadius: "10",
      },
      data: [
        {
          value: 54.6,
          name: "2级匹配度",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: color[0],
                },
                {
                  offset: 1,
                  color: color[1],
                },
              ]),
            },
          },
        },
        {
          value: 45.4,
          name: "",
          tooltip: {
            show: false,
          },
          itemStyle: placeHolderStyle,
        },
      ],
    },
    {
      name: "Line 2",
      type: "pie",
      clockWise: false,
      // radius: [60, 70],
      radius: generateArray2[2],
      center: ["50%", "50%"],
      itemStyle: dataStyle,
      hoverAnimation: false,
      startAngle: 90,
      data: [
        {
          value: 56.7,
          name: "3级匹配度",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: color[2],
                },
                {
                  offset: 1,
                  color: color[3],
                },
              ]),
            },
          },
        },
        {
          value: 43.3,
          name: "",
          tooltip: {
            show: false,
          },
          itemStyle: placeHolderStyle,
        },
      ],
    },
    {
      name: "Line 3",
      type: "pie",
      clockWise: false,
      // radius: [40, 50],
      radius: generateArray2[3],
      center: ["50%", "50%"],
      itemStyle: dataStyle,
      hoverAnimation: false,
      startAngle: 90,
      data: [
        {
          value: 30,
          name: "4级匹配度",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: color[4],
                },
                {
                  offset: 1,
                  color: color[5],
                },
              ]),
            },
          },
        },
        {
          value: 0,
          name: "",
          tooltip: {
            show: false,
          },
          itemStyle: placeHolderStyle,
        },
      ],
    },
  ],
};

onMounted(() => {
  myChart = echarts.init(echartRef.value);

  console.log(myChart);
  const chartOption = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };
  myChart.setOption(option);

  // 监听窗口的 resize 事件
  const resizeHandler = () => {
    if (myChart != null) {
      try {
        myChart.setOption(option);
        myChart.resize();
      } catch (error) {
        console.error("Resize error:", error);
      }
    }
  };
  window.addEventListener("resize", resizeHandler);

  // 组件卸载时移除事件监听器
  onUnmounted(() => {
    window.removeEventListener("resize", resizeHandler);
    if (myChart != null) {
      myChart.dispose();
    }
  });
});
</script>

<style scoped lang="scss">
.concentric-circle-chart {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
